<!-- 新闻详情 -->
<template>
  <div class="all">
    <!-- 折叠面板组件 -->

    <Card>
      <div style="min-height: 730px">
        <Row>
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>新建媒体库</Col>
            </Row>
          </Col>
        </Row>
        <!-- 新闻表单 -->
        <Form ref="ndForm" :model="ndForm" :rules="ndRuleForm" :label-width="110">
          <Row>
            <Col span="7">
              <FormItem label="媒体名称" prop="nd_title">
                <Input v-model="ndForm.nd_title" placeholder="请输入媒体名称"></Input>
              </FormItem>
            </Col>
            <!-- <Col span="7" push="1">
              <FormItem label="媒体类型" prop="nd_name">
                <Input v-model="ndForm.nd_name" placeholder="请输入媒体类型"></Input>
              </FormItem>
            </Col>-->
          </Row>
          <Row>
            <!-- <Col span="7">
              <FormItem label="发布单位" prop="nd_issued">
                <Select v-model="ndForm.nd_issued" placeholder="选择发布单位">
                  <Option value="jinan">济南分行</Option>
                  <Option value="tianjin">天津分行</Option>
                  <Option value="beijing">北京分行</Option>
                </Select>
              </FormItem>
            </Col>-->
          </Row>
          <Row>
            <Col span="7">
              <FormItem label="媒体类型" prop="nd_media">
                <Select v-model="ndForm.nd_media" placeholder="选择发布媒体">
                  <Option value="fenghuang">凤凰网天津频道</Option>
                  <Option value="weibo">微博</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="7">
              <FormItem label="网址" prop="nd_title">
                <Input v-model="ndForm.nd_title" placeholder="请输入网址"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="7">
              <FormItem label="附件上传：">
                <Upload
                  :disabled="fileUpDisabled"
                  :multiple="false"
                  type="drag"
                  :action="apiData+'/emergency-filestore/file/store/single'"
                  :headers="headers"
                  :on-success="fileUpSuccess"
                  :on-remove="fileUpRemove"
                >
                  <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" :style="fileUpStyle"></Icon>
                    <p>请点击或拖拽文件到此区域</p>
                  </div>
                </Upload>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="7" type="flex" align="middle" justify="center">
              <FormItem>
                <Button type="primary" @click="handleSubmit('ndForm')">提交</Button>
                <!-- <Button type="success" @click="handleReset('ndForm')" style="margin-left: 8px">审核通过</Button> -->
                <Button type="error" @click="handleReset('ndForm')" style="margin-left: 8px">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </Card>
  </div>
</template>
<style scoped>
.send-news {
  margin-bottom: 10px;
}

.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
/* .ivu-form .ivu-form-item-label{
    color: rgb(64, 149, 255) !important;
} */
</style>
<script>
export default {
  data() {
    return {
      //表单数据
      ndForm: {
        nd_title: "",
        nd_name: "",
        nd_issued: "",
        nd_news_attributes: [],
        nd_media: "",
        nd_estimated_time: "",
        nd_release_time: "",
        nd_release_date: "",
        nd_same_report: "",
        nd_reprinted: "",
        nd_quality_analysis: "",
        nd_abstract: "",
        nd_word_count: "",
        nd_score: ""
      },
      ndRuleForm: {
        nd_title: [
          { required: true, message: "请输入新闻标题", trigger: "blur" }
        ],
        nd_name: [
          { required: true, message: "请输入作者姓名", trigger: "blur" }
        ],
        nd_issued: [{ required: true }],
        nd_news_attributes: [{ required: true }],
        nd_media: [{ required: true }],
        nd_estimated_time: [{ required: true }],
        nd_release: [{ required: true }],
        nd_same_report: [{ required: true }],
        nd_reprinted: [{ required: true }],
        nd_quality_analysis: [{ required: true }],
        nd_abstract: [{ required: true }],
        nd_word_count: [{ required: true }],
        nd_score: [{ required: true }]
      },
      rotate: false, //控制折叠面板图标旋转,
      efaultList: [
        {
          name: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
        },
        {
          name: "bc7521e033abdd1e92222d733590f104",
          url:
            "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
        }
      ],
      imgName: "",
      visible: false,
      uploadList: []
    };
  },
  created() {
    console.log(this.$route.params.id);
    this.ndForm.nd_title = window.news[this.$route.params.id].headlines; //
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  },
  methods: {
    test(name) {
      this.$router.push({ name: name });
    },
    //改变折叠面板的图标https://www.cnblogs.com/IwishIcould/p/11823397.html
    changeIcon() {
      this.rotate = !this.rotate;
    },
    //表单按钮方法
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url =
        "https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
      file.name = "7eb99afb9d5f317c912f08b5212fd69a";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    }
  },
  computed: {}
};
</script>

